<template>
  <div class="p-6">
    <el-form
      :model="login"
      :rules="rules"
      label-width="auto"
      class="max-w-96 text-white"
      ref="ruleFormRef"
    >
      <el-form-item label="交易提示音：" prop="account" class="w-full">
        <el-switch v-model="login.value1" />
      </el-form-item>
      <el-form-item label="持仓模式：" prop="account" class="w-full">
        <el-radio-group v-model="login.radio">
          <el-radio :value="3">双向持仓</el-radio>
          <el-radio :value="6">单向持仓</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="杠杆倍数：" prop="password" class="w-full">
        <el-input
          v-model="login.input2"
          size="large"
          autocomplete="off"
          class="w-16"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm()"
          size="large"
          class="mt-6 w-36 ml-auto"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ref } from "vue";

const input2 = ref();
const login = ref({
  value1: "",
  radio: 3,
  input2: "",
});
const rules = {
  account: [{ required: true, message: "请输入账号", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
};

const ruleFormRef = ref<FormInstance>();

const submitForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log("submit!");
      // 登录
    } else {
      return false;
    }
  });
};
</script>
